<template>
	<view class="cooperate">
		<u-form
			labelPosition="top"
			:model="formData"
			:rules="rules"
			labelWidth="300rpx"
			ref="form"
		>
			<u-form-item label="留下您的姓名" prop="name" required borderBottom>
				<u-input v-model="formData.name" placeholder="请输入" border="none" />
			</u-form-item>
			<u-form-item label="联系您的联系方式" prop="phone" required>
				<u-input v-model="formData.phone" placeholder="请输入" border="none" type="number" />
			</u-form-item>
		</u-form>
		
		<u-button text="提交" shape="circle" @click="submit" color="linear-gradient(0deg, rgb(47, 117, 250) 0%, rgb(82, 142, 255) 100%)"></u-button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			formData: {
				name: ''
			},
			rules: {
				name: {
					required: true, 
					message: '请输入您的姓名',
					trigger: ['change'],
				},
				phone: {
					required: true, 
					message: '请输入您的联系方式',
					trigger: ['change'],
				},
			},
		}
	},
	onReady() {
		this.$refs.form.setRules(this.rules);
	},
	methods: {
		async submit() {
			try {
				const valid = await this.$refs.form.validate();
				if (valid) {
					console.log(this.formData);
				}
			} catch (e) {
				
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.cooperate {
	min-height: 100vh;
	background-color: #f3f3f3;
	padding: 30rpx;
	
	/deep/.u-form {
		background-color: #fff;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		padding: 20rpx 0;
		
		.u-form-item {
			padding: 0 30rpx;
		}
	}
}
</style>
